Day19——JavaScript Modules 模組的輸出和輸入

2024 iThome 鐵人賽

佛心分享-IT 人自學之術

JavaScript自學分享系列第 19 篇

16th鐵人賽

姐姐恩

2024-10-13 21:01:46

47 瀏覽

分享至

大家好～我是姐姐恩！身為資訊小白的我，起初對於參賽主題非常苦惱，最後決定利用此次機會，延續學校的課(Java)，了解網頁前端三劍客之一的JavaScript！
所以接下來30天，我將在這裡紀錄我當天的學習筆記及統整後的學習內容，請大家多多指教！
＊學習內容主要取自MDN Web Docs及彭彭老師的YT課程。

JavaScript Modules 模組的輸出和輸入

非預設輸出:export{變數名稱,變數名稱,......};
非預設輸入:import{變數名稱,變數名稱,......}from "模組檔案入境";

輸出和輸入名稱須相同。
預設與非預設輸出&輸入可以一起使用，但輸出與輸入的變數名稱須對應。

程式碼練習&註解筆記:

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta charset="utf-8" />
        <title>JavaScript 模組的輸出與輸入</title>
    </head>
    <body>
        <script type="module" src="main.js"></script>
    </body>
</html>

lib.js

let add=function(n1,n2){
    console.log(n1+n2);
};
let multiply=function(n1,n2){
    console.log(n1*n2);
};
let math={
    add:add, multiply:multiply
};
export default math; //預設輸出
export{add, multiply}; //非預設

/*
//預設的輸入
let x= "Hello";
//export default x;
//非預設的輸入
let data=[5, 6, 7];
let obj ={x:10, y:2};
//export{data, obj}
export {x as default, data, obj};
*/

main.js

import math, { multiply } from "./lib.js";
math.add(3, 4);
math.multiply(-3, 4);


/* 部分輸入
import {multiply} from "./lib.js";
multiply(3, 4);
multiply(-2, 2);
*/

/*
import abc, {data, obj} from "./lib.js";
//預設的輸出
//import abc from "./lib.js"
console.log(abc); //可以和lib.js的變數名稱不同(因為是預設輸入)
//非預設的輸出
//import { data, obj } from "./lib.js";
console.log(data, obj);
*/

學習資源:
JavaScript Modules 模組的輸出和輸入 - Front End 網頁前端工程教學